<template>
    <!-- 上下游企业贷款审批 -->
    <!-- 设置参会人 -->
<div class="upandowna">
    <!-- 标题 -->
    <span class="spanone">设置参会人</span>
    <div class="upandowna-top2">
        <!-- 下拉列表企业名称 -->
        <div class="selected" style="width: 130px;border:0">
            <el-select v-model="value" class="m-2" placeholder="企业名称">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
            </el-select>
        </div>
        <!-- 搜索 -->
        <div class="searched">
            <el-input
            v-model="input2"
            class="w-50 m-2"
            placeholder="请输入要查询核心企业名称"
            :prefix-icon="Search"
            style="width: 240px"
            />
        </div>
        <!-- 下拉列表状态 -->
        <div class="selected" style="width: 90px">
            <el-select v-model="value1" class="m-3" placeholder="状态">
                <el-option
                v-for="item in optionsed"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
            </el-select>
        </div>
        <!-- 查询 -->
        <el-button type="primary">查询</el-button>
        <el-button type="primary" plain>重置</el-button>
    </div>
    <!-- 表格 -->
    <div class="upandowna-main">
        <el-table :data="tableData" style="width: 98%">
            <el-table-column label="序号" width="60">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.htContractid }}</span>
                </div>
            </template>
            </el-table-column>
            <el-table-column label="企业名称" width="200">
            <template #default="scope">
                <div>{{ scope.row.htBusinessname }}</div>
            </template>
            </el-table-column>
            <el-table-column label="社会信用代码" width="260">
            <template #default="scope">
                <div>{{ scope.row.htSocialcreditid }}</div>
            </template>
            </el-table-column>
            <el-table-column label="注册资本" width="180">
            <template #default="scope">
               <div>{{ scope.row.htRegisteredmoney }}</div>
            </template>
            </el-table-column>
            <el-table-column label="业务员" width="130">
            <template #default="scope">
               <div>{{ scope.row.htSalesman }}</div>
            </template>
            </el-table-column>
            <el-table-column label="审批人" width="130">
            <template #default="scope">
               <div>{{ scope.row.htLenders }}</div>
            </template>
            </el-table-column>
            <el-table-column label="流程状态" width="130">
            <template #default="scope">
               <div>{{ scope.row.htProcessstatus }}</div>
            </template>
            </el-table-column>
            <el-table-column label="任务开始时间" width="170">
            <template #default="scope">
                <div>{{ scope.row.htStarttime }}</div>
            </template>
            </el-table-column>
            <el-table-column label="操作" width="180" class="seetings">
            <template #default="scope">
                <div class="scope"  @mouseenter="onMouseOver(scope)" @mouseleave="onMouseOut(scope)" >
                    <el-tooltip
                        content="查看"
                    >
                    <el-button>
                        <el-icon v-if="showto" @click="lookview"><View /></el-icon>
                    </el-button>
                    </el-tooltip>
                    <el-tooltip
                        content="申请进件"
                    >
                    <el-button>
                    <el-icon v-if="showto" ><Position /></el-icon>
                    </el-button>
                    </el-tooltip>
                </div>
            </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="upandowna-bottom">
        <div class="demo-pagination-block">
            <span>共{{totalnums}}条</span>
            <span><el-button>5条/页<el-icon><CaretBottom /></el-icon></el-button></span>
            <el-pagination
                v-model:current-page="currentPage4"
                v-model:page-size="pageSize4"
                background
                layout="prev, pager, next"
                :total="totalnums"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
            <span>前往{{currentPage4}}页</span>
        </div>
    </div>
    
</div>
</template>

<script setup>
    import {onMounted, ref} from 'vue'
    import { Search } from '@element-plus/icons-vue'
    import { Timer } from '@element-plus/icons-vue'
    import {useRouter} from 'vue-router'
    import * as serviceAxios from '../../apis/szx/data'
    const value = ref('');
    const value1 = ref('');
    const input1 = ref('');
    const input2 = ref('');

    const currentPage4 = ref(1)
    const pageSize4 = ref(5)
    const small = ref(false)
    const background = ref(true)
    var router=useRouter()
    var showto=ref(false)
    var totalnums=ref(22)

    const handleSizeChange = (val) => {
        console.log(`${val} items per page`)
    }
    const handleCurrentChange = (val) => {
        // console.log(`current page: ${val}`)
        return val
    }
    // 编辑
    const handleEdit = (index, row) => {
        console.log(index, row)
        router.push("点击了")
    }
    // 删除
    const handleDelete = (index, row) => {
        console.log(index, row)
    }

    
    // 鼠标移入
    const onMouseOver=(item)=>{
        showto.value=!showto.value
      console.log(item, '鼠标进来了');
    }
    // 鼠标移出
    const onMouseOut=(item)=>{
        showto.value=!showto.value
      console.log(item,'鼠标出去了');
    }
    // 查看客户信息
    let lookview=()=>{
        router.push('/home/upandown/upandownads')
    }


    const options = [
        {
            value: '企业名称',
            label: '企业名称',
        },
        {
            value: '社会信用代码',
            label: '社会信用代码',
        }
    ];
    const optionsed = [
        {
            value: '待提交',
            label: '待提交',
        },
        {
            value: '已处理',
            label: '已处理',
        }
    ];
    var tableData=ref([])
    onMounted(async ()=>{
        // 设置参会人
        var res=await serviceAxios.htContract_list();
        console.log(res.data.data);
        tableData.value=res.data.data
    })
</script>

<style scoped>
.demo-pagination-block {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
/* 标题 */
.upandowna .spanone{
    color: #fff;
    background-color: #4ba7fe;
    padding: 6px 50px;
    border-radius: 30px;
}
/* upandowna-top2 行 */
.upandowna .upandowna-top2{
    margin-top: 30px;
    margin-left: 10px;
    display: flex;
}
.upandowna .upandowna-top2 .selected{
    margin-left: 20px;
}
.upandowna .upandowna-top2 .searched{
    margin-left: 20px;
}
.upandowna .upandowna-top2 .el-button{
    margin-left: 20px;
}
/* 表格 */
.upandowna .upandowna-main{
    width: 90%;
    margin-top: 10px;
    margin-left: 20px;
}
/* 分页 */
.upandowna-bottom{
    /* border: 1px solid red; */
    width: 90%;
    margin-top: 200px;
    margin-left: 20px;
}
.upandowna-bottom .demo-pagination-block{
    width: 40%;
    /* border: 1px solid rebeccapurple; */
    margin: 0 auto;
}
.scope{
    display: flex;
    justify-content: space-around;
    padding: 4px 0;
    /* background-color: red; */
}
.scope .el-button{
    border: 0;
    background-color: transparent;
}

::v-deep .el-table .cell{
    text-align: center;
}

</style>